<html>
    <head>
        <title>点击按波纹效果</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
        <style>
            *{
                margin: 0;
                padding: 0;
                font-family: "Open Hans";
            }   
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                min-height: 100vh;
                background: #040d15;
            }
            a{
                position:relative;
                display: inline-block;
                padding: 12px 36px;
                margin: 10px 0;
                color: #ffffff;
                text-decoration: none;
                text-transform: uppercase;
                font-size: 18px;
                letter-spacing: 2px;
                border-radius: 40px;
                overflow: hidden;
                background: linear-gradient(90deg, #0162c8, #55e7fc);
            }
            a:nth-child(2){
                background: linear-gradient(90deg, #755bea, #ff72c0);
            }
            span{
                position: absolute;
                background: #fff;
                transform: translate(-50%, -50%);
                pointer-events: none;
                border-radius: 50%;
                animation: animate 1s linear infinite;
            }
            /* 添加动画效果 */
            @keyframes animate{
                0%{
                    width: 0px;
                    height: 0px;
                    opacity: 0.5;
                }
                100%{
                    width: 500px;
                    height: 500px;
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <a href="#">Button</a>
        <a href="#">Button</a>
        <script type="text/javascript">
            // 鼠标点击啊a时，添加一个span
            const buttons = document.querySelectorAll('a');
            buttons.forEach(btn => {
                btn.addEventListener('click', function(e){
                    let x = e.clientX - e.target.offsetLeft;
                    let y = e.clientY - e.target.offsetTop;

                    let ripples = document.createElement('span');
                    ripples.style.left = x + 'px';
                    ripples.style.top = y + 'px';
                    this.appendChild(ripples);

                    setTimeout(() => {ripples.remove()}, 1000)
                })
            })
        </script>
    </body>
</html>